<script lang="ts" setup>
  import { computed } from 'vue'

  const props = defineProps({
    width: {
      type: [Number, String],
      default: 150
    },
    fixed: {
      type: Boolean,
      default: true
    },
    mini: {
      type: Boolean,
      default: false
    },
    date: {
      type: Boolean,
      default: false
    },
    date2: {
      type: Boolean,
      default: false
    }
  })

  const boxStyle = computed(() => {
    const re:any = {}
    if (props.fixed) {
      re.width = (typeof props.width === 'number') ? (props.width + 'px') : props.width
    }
    if (props.date)re.width = '400px'
    else if (props.date2)re.width = '250px'
    return re
  })


</script>

<template>
  <div :class="['search-item-box',mini?'search-item-box-mini':'']" :style="fixed?{width:width+'px'}:{}">
    <slot />
  </div>
</template>

<style scoped lang="scss">
  .search-item-box{
    flex:none;
    margin-right: 10px;
    min-width: 120px;
  }
  .search-item-box-mini{
    margin-right: 5px;
    min-width: 90px;
  }
</style>
